<template>
  <div class="head-box">
      <el-row class="head-row">
          <el-col :span="5" class="head-title" @click="changeisCollapse"> 
              <i class=" head-icon" :class="isCollapse?'el-icon-arrow-right':'el-icon-arrow-left'" size="30" ></i>
              <h2 class="title">我爱我家社区管理系统</h2>
          </el-col>
          <el-col :span="13" class="pd20" >
            <marquee behavior="" direction="">
              我爱我家社区管理系统正式上线啦!
            </marquee>
          </el-col>
          <el-col :span="6" class="head-user" v-if="userInfo">
              <el-tag size="mini" :hit="true" effect="light" class="myrole" :color="roleList.find(item=>item.value==userInfo.role).color">{{roleList.find(item=>item.value==userInfo.role).text}}</el-tag>
              <p class="avatar">
                <el-tooltip content="上传头像" placement="bottom">
                   <Avatar/>
                </el-tooltip>
              </p>
              <el-dropdown @command="handleClick">
                <p class="head-info">
                  <span>{{userInfo.username}}</span>
                  <i class="el-icon-caret-bottom"></i>
                </p>
                <template #dropdown>
                  <el-dropdown-menu >
                    <el-dropdown-item command="home">首页</el-dropdown-item>
                    <el-dropdown-item command="info">个人中心</el-dropdown-item>
                    <el-dropdown-item command="changepass">修改密码</el-dropdown-item>
                     <el-dropdown-item command="logout">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
          </el-col>
      </el-row>

      <el-dialog
        title="修改密码"
        v-model="dialogVisible"
        width="40%"
        :before-close="handleClose">
        <el-form 
        ref="myform" 
        :model="form" 
        label-width="120px"
        status-icon 
        class="myform"
        :rules="rules"
      >
      
       <el-form-item label="旧密码" prop="oldpass" >
        <el-input 
        prefix-icon="el-icon-lock" 
        v-model="form.oldpass"
        type="password"
         placeholder="请输入旧密码"
         autocomplete="off"
         show-password
      ></el-input>
       </el-form-item>
      <el-form-item label="新密码" prop="newpass" >
        <el-input 
        prefix-icon="el-icon-lock" 
        v-model="form.newpass"
        type="password"
         placeholder="请输入新密码"
         autocomplete="off"
         show-password
         @blur="checkpasscommon"
      ></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="dbnewpass" >
        <el-input 
        prefix-icon="el-icon-lock" 
        v-model="form.dbnewpass"
        type="password"
         placeholder="请输入确认新密码"
         autocomplete="off"
         show-password
      ></el-input>
      </el-form-item>
    </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消操作</el-button>
            <el-button type="primary" @click="changepass"
              >确认修改</el-button
            >
          </span>
        </template>
      </el-dialog>
  </div>
</template>

<script>
import {useStore }  from "vuex"
import {computed,reactive,toRefs,ref} from "vue"
import { roleList, toast } from '../utils';
import {useRouter} from "vue-router"
import Avatar from "./avatar.vue"
import { ElMessageBox, ElMessage } from 'element-plus'
import { reg } from '@/utils/validate';
import { ajax } from '../service';
export default {
  name:"myhead",
  components:{
    Avatar
  },
  setup(props,context){
    const store = useStore();
    const router= useRouter();
    const myform = ref() 
    const state = reactive({
      roleList,
      dialogVisible:false,
      form:{},
      rules:{
        oldpass:[
           { required: true, message: '请输入旧密码', trigger: 'blur'},
          {
            validator:function(rule, value, callback){
              if(reg.pwd.test(value)){
                  callback()
              }else{
                callback(new Error('请输入6-16数字和字母组合'));
              }
            }
          }
        ],
        newpass:[
           { required: true, message: '请输入新密码', trigger: 'blur'},
          {
            validator:function(rule, value, callback){
              if(reg.pwd.test(value)){
                  callback()
              }else{
                callback(new Error('请输入6-16数字和字母组合'));
              }
            }
          }
        ],
        dbnewpass:[
          { required: true, message: '请输入确认新密码', trigger: 'blur'},
          {
            validator:function(rule, value, callback){
              if(reg.pwd.test(value)){
                if(value==state.form.newpass){
                  callback()
                }else{
                  callback(new Error('2次密码不一致'));
                }
              }else{
                callback(new Error('请输入6-16数字和字母组合'));
              }
            }
          }
        ]
      }
    }) 
    const userInfo = computed(()=>{
      return store.state.userInfo;
    })
    const isCollapse = computed(()=>{
      return store.state.isCollapse;
    })
    const handleClick = (value)=>{
      console.log("clickme" )
      console.log(value)
      // router.push()
      if(value=="logout"){
          todoLogout()
      }else if(value=="home"){
        router.push({name:'home'})
      }else if(value=="info"){
        router.push({name:'info'})
      } else if(value=="changepass"){
        state.dialogVisible = true; 
      }

    }
    const changeisCollapse = ()=>{
      // 切换隐藏和显示
      console.log("store.state.isCollapse")
      store.commit("changeisCollapse",!store.state.isCollapse);
    }
     const todoLogout = ()=>{
        ElMessageBox.confirm(
        '亲,你真的要退出登录吗?',
        '退出警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
            router.replace({name:"login"})
            sessionStorage.removeItem("authtoken");
            store.commit("changeUserInfo",null);
        })
        .catch(() => {
          
        })
    }
    const handleClose = ()=>{
        state.dialogVisible  = false;
    }
    const checkpasscommon = ()=>{
        if(state.form.newpass){
           myform.value.validateField("dbnewpass")
        }
    }
    const changepass =  ()=>{
       myform.value.validate(async valid=>{
         if(valid){
           
          const {code,result} = await ajax.changepass(state.form);
          if(code==200){
            router.replace({name:'login'})
          }
         }else{
           toast.showError("请输入有效的数据")
         }
       })
    }
    return {
      userInfo,
      ...toRefs(state),
      handleClick,
      changeisCollapse,
      isCollapse,
      handleClose,
      myform,
      checkpasscommon,
      changepass 
    }
  }
}
</script>


<style lang="scss" scoped>
.head-box{
  height:100%;
  .head-row{
    height:100%;
    display: flex;
    align-items: center;
    .head-title{
      display: flex;
      align-items: center;
      cursor: pointer;
      .head-icon{
        font-size: 20px;
        font-weight: bold;
      }
    }
    .head-user{
      display: flex;
      align-items: center;
      justify-content: space-around;
      .myrole{
        color:#fff;
      }
      .avatar{
        margin:0 20px;
        cursor: pointer;
        position: relative;
      }
      .head-info{
        font-size:18px;
        color:#123456;
        cursor: pointer;
      }
    }
  }
  
}
</style>
